<!doctype html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>保单申请信息填写</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"
          integrity="sha512-++bHK0UNrNHW3LVNLzgTm2G7uOH6Kd+Ved0sskOL0+TY7pr5AcWQgR19kdjAhyyiQRDjFwXubDGqTvjnS09HNA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
            integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"
            integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
            integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <![endif]-->
    <style>
        .m8 {
            margin-top: 8px;
        }

        .mt20 {
            margin-top: 60px;
        }

        .mb20 {
            margin-bottom: 20px;
        }

        .mb10 {
            margin-bottom: 10px;
        }

        .ml20 {
            margin-left: 20px;
        }

        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: left;
        }

        .eetwo {
            text-indent: 30px;
        }
    </style>

    <script>
        $.validator.addMethod("phone", function (value, element) {
            var length = value.length;
            var mobile = /^(1)\d{10}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写手机号码");
        //文档加载完毕以后 做校验
        $().ready(function () {
            var dd = $("form#applyForm");
            var tagModal = $('#tagModal');
            var text = $("#messageBody")

            var resultMessage = $("#resultMessage");
            var validator = dd.validate();
            $("#applyButton").bind('click', function () {
                var checkMe = $("input[name='checkMe']:checked")
                var check = checkMe.val();
                if ('check' !== check) {
                    alert('请勾选我已经阅读相关保险条例');
                    return
                }
                var result = validator.form();
                if (result) {
                    tagModal.modal()
                }
            })

            $("#sumbitApply").bind('click', function () {
                var validate = validator.form();
                var data = dd.serialize();
                if (validate) {
                    $.post({
                        url: '${path}/insurance/user/order/immediateInsurance',
                        data: data,
                        success: function (result) {
                            console.info(result);
                            if (result.code === 200) {
                                alert("申请成功,确认后将跳转到支付页面")
                                window.location.replace(result.result);
                            } else {
                                tagModal.modal('hide');
                                text.html(result.message)
                                resultMessage.modal()
                            }
                        }
                    })
                }
            })
        });
    </script>
</head>
<body>
<div class="row" style="height: 67px;background-color: #2b2b2b">
</div>
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="row mt20">
<#--            <img height="300px" src="https://file.tbzhubao.com/insure/back.png?x-oss-process=style/suoxiao"/>-->
        </div>
        <div class="row" style="margin-top: 8px">
            <h4 style="font-weight:bolder;font-size: 18px;">保险基本信息</h4>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="applyForm" class="form-horizontal">
                        <input type="hidden" name="id" value="${order.id!""}">
                        <input type="hidden" name="sign" value="${order.sign!""}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">订单编号</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${order.orderNo!}" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">预计生效时间</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${policyConfig.insureStartDate!}"
                                       readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">保险保险天数</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${policyConfig.insureDays!}" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">保险金额</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${policy.bond!}" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">保费金额</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${policy.premium!}" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="color: red" for="policyLinkmanName">投保联系人*</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${order.policyLinkmanName!""}"
                                       id="policyLinkmanName" name="policyLinkmanName" required
                                       data-msg-required="请填写投保联系人" trigger="blur"
                                       placeholder="请填写投保联系人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="color: red" for="policyLinkmanMobilename">投保联系人电话*</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" value="${order.policyLinkmanMobilename!""}"
                                       id="policyLinkmanMobilename" name="policyLinkmanMobilename"
                                       data-rule-phone="true" required trigger="blur"
                                       data-msg-required="请填写投保联系人电话"
                                       placeholder="请填写投保联系人电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="invitationCode">邀请码</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" id="invitationCode" name="invitationCode">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 8px;margin-left: 10px">
            <span  style="float: left;font-weight: bolder;font-size: 16px">我已阅读: <input name="checkMe" value="check" type="radio"/></span>
            <div style="margin-left: 40px;float: left">
                <a style="font-weight: bolder;font-size: 16px;margin-left: 10px" target="_blank" href="https://file.tbzhubao.com/insure/%E6%8A%95%E4%BF%9D%E9%A1%BB%E7%9F%A5.html">《投保须知》</a>
                <a style="font-weight: bolder;font-size: 16px;margin-left: 10px" target="_blank" href="https://file.tbzhubao.com/insure/%E4%BF%9D%E9%99%A9%E7%BB%8F%E7%BA%AA%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html">《保险经纪服务协议》</a>
                <#if order.insuranceCompany =='YGBX' >
                    <a style="font-weight: bolder;font-size: 16px;margin-left: 10px" target="_blank" href="https://file.tbzhubao.com/insure/%E4%BF%9D%E9%99%A9%E6%9D%A1%E6%AC%BE.html">《保险条款》</a>
                </#if>
            </div>
        </div>
        <div>
            <div class="row">
                <div style="float: right">
                    <button id="applyButton" type="button" class="btn btn-primary">立即投保</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>
<div class="modal fade" id="resultMessage" tabindex="1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">操作结果</h4>
        </div>
        <div class="modal-content">
            <div class="modal-body">
                <p id="messageBody"></p>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="tagModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">投保确认书</h4>
            </div>
            <div class="modal-body">
                <p>尊敬的投标人:</p>
                <p class="eetwo">
                    你已进入投标履约保证保险的申请流程，本产品由保险公司承保，广润保险经纪有限公司销售。请仔细阅读保险条款、投保须知、客户告知书等内容，并关注承保保险公司信息。为保障你的权益，我们将会安全记录你的操作。</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="sumbitApply" class="btn btn-primary">我已确认</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>